<template>
  <el-dialog v-model="dialogFormVisible" title='添加产品入库' width="600px" align-center draggable>
    <div class="dialog-content">
      <el-form ref="ruleFormRef" :model="formData" :label-position="labelPosition" :rules="rules" label-width="120px">
        <el-form-item label="入库编号" prop="product_id">
					<el-input v-model="formData.product_id" />
				</el-form-item>
				<el-form-item label="产品名称" prop="product_name">
					<el-input v-model="formData.product_name" />
				</el-form-item>
				<el-form-item label="产品类别" prop="product_category">
					<el-select v-model="formData.product_category" placeholder="请选择产品类别">
						<el-option v-for="item in categoryData" :key="item" :label="item" :value="item" />
					</el-select>
				</el-form-item>
				<el-form-item label="产品单位" prop="product_unit">
          <el-input v-model="formData.product_unit" />
				</el-form-item>
				<el-form-item label="产品入库数量" prop="product_in_warehouse_number">
					<el-input v-model="formData.product_in_warehouse_number" />
				</el-form-item>
				<el-form-item label="产品入库单价" prop="product_single_price">
					<el-input v-model="formData.product_single_price" />
				</el-form-item>
				<el-form-item label="入库操作人" prop="product_create_person">
					<el-input v-model="formData.product_create_person"  disabled />
				</el-form-item>
				<el-form-item label="入库备注" prop="in_memo">
					<el-input v-model="formData.in_memo" :rows="2" type="textarea" />
				</el-form-item>
      </el-form>
    </div>

    <template #footer>
			<span class="dialog-footer">
				<el-button type="primary" @click="add">确定</el-button>
			</span>
		</template>
  </el-dialog> 
</template>
 
<script setup lang="ts">
  import { reactive, ref } from 'vue';
  import { ElMessage } from 'element-plus';
  import { getProduct } from '@/api/setting';
  import { createProduct } from '@/api/product';

  const labelPosition = ref('left')  // :label-position 控制表单标签的位置
  const ruleFormRef = ref()

  interface FormData {
		product_id : number,
		product_name : string,
		product_category : string,
		product_unit : string,
    product_in_warehouse_number : number,
		product_single_price : number,
		product_create_person : string,
		in_memo : string
	}

	const formData : FormData = reactive({
		product_id: null,
		product_name: '',
		product_category: '',
		product_unit: '',
    product_in_warehouse_number: null,
		product_single_price: null,
		product_create_person: localStorage.getItem('name'),
		in_memo: ''
	})

	const rules = reactive({
		product_id: [
			{ required: true, message: '请输入入库编号', trigger: 'blur' },
		],
		product_name: [
			{ required: true, message: '请输入产品名称', trigger: 'blur' },
		],
		product_category: [
			{ required: true, message: '请选择产品类别', trigger: 'blur' },
		],
		product_unit: [
			{ required: true, message: '请选择产品单位', trigger: 'blur' },
		],
    product_in_warehouse_number: [
			{ required: true, message: '请输入产品入库数量', trigger: 'blur' },
		],
		product_single_price: [
			{ required: true, message: '请输入产品入库单价', trigger: 'blur' },
		],
		product_create_person: [
			{ required: true, message: '请输入入库操作人', trigger: 'blur' },
		],
	})

  // 产品类别数据
  const categoryData = ref([])
	const returnProduct = async() => {
		const res = await getProduct()
    categoryData.value = res.data
	}
	returnProduct()

  const emit = defineEmits(['success'])  // 定义了一个名为 success 的自定义事件

  // 产品入库
  const add = async () => {
    const res = await createProduct(formData)
    if(res.data.status === 0) {
      ElMessage({
				message: '产品入库成功',
				type: 'success',
			})
      emit('success')
      dialogFormVisible.value = false
    } else {
      ElMessage.error('产品入库失败')
      dialogFormVisible.value = false
    }
  }

  // ------------------------------------------------------------------------------弹窗开关
	const dialogFormVisible = ref(false)
  // 打开创建管理员的弹窗
  const open = () => {
    dialogFormVisible.value = true
  }
  defineExpose({
    open
  })
</script>
 
<style lang="scss" scoped>
	.dialog-content {
		display: flex;
		padding: 20px 30px;
	}

	:deep(.el-form-item) {
		margin: 30px;
	}
</style>